<template>
  <div class="orders_box">
    <topHeader>
      <div slot="left">
        <img src="./../../assets/img/return.png" alt="" @click="goMine">
      </div>
      <span slot="center">
        我的预约
      </span>
      <div slot="right" v-if="manageClick">
        <span v-if="manageBolean" @click="doManage">管理</span>
        <span v-if="!manageBolean" @click="doManageCancle">取消</span>
      </div>
      <!-- <div slot="right"  v-if="manageClick">
        取消
      </div> -->
    </topHeader>
    <div class="myroute_box_con">
      <div class="myroute_box_con_t">
        <button-tab v-model="tabValue" >
          <button-tab-item @on-item-click="tabClick(1)">订单记录</button-tab-item>
          <button-tab-item @on-item-click="tabClick(2)">预约记录</button-tab-item>
        </button-tab>
      </div>
      <div class="orders_box_con" v-if="tabValue === 0">
        <div class="order_li" v-for="(item,index) of orderList">
          <div class="order_li_l">
            <p>始终点：{{ item.start }} &rarr; {{ item.end }}</p>
            <p>时间：{{ item.outtime }}</p>
            <p>车主：<span style="color: #568df4">{{ item.phone }}【点击拨打】</span></p>
            <p>人数：{{ item.num }}人</p>
            <p>上车地点：{{ item.starts }}</p>
          </div>
          <div class="order_li_r">
            <div class="update_btn" @click="viewOrder(item)" v-if="!manageClick" >查看</div>
            <!-- <div class="delate_btn" @click="delateOrder" v-else>删除</div> -->
            <div class="flag" v-if="item.status === 1">已取消</div>
            <div class="flag" v-if="item.status === 0" style="color: #568df4">进行中</div>
          </div>
        </div>
      </div>
      <div class="myroute_box_con_b" v-if="tabValue === 1">
        <div class="order_li" v-for="item of noCarOrderList">
          <div class="order_li_l">
            <p>始终点：{{ item.start }}&rarr;{{ item.end }} </p>
            <p>出发时间：{{ item.outtime }}</p>
            <p>人数：{{ item.num }}人</p>
            <p>等待时间：{{ item.waittime }}</p>
            <!-- <p>人数：1人</p> -->
          </div>
          <div class="order_li_r">
            <div class="update_btn" @click="viewNocarOrder(item)" v-if="manageBolean&& item.isnong === 0" >查看</div>
            <div class="update_btn" @click="delateNocarOrder(item.id)" v-if="!manageBolean && item.isnong === 2 || !manageBolean && item.isnong === 1" >删除</div>
            <div class="delate_btn" v-if="!manageBolean && item.isnong === 0" @click="updateNocarOrder(item)">修改</div>
            <div class="flag" v-if="item.isnong === 0" style="color: #558ff6">搜索中</div>
            <div class="flag" v-if="item.isnong === 1" style="color: #04BE02">成功</div>
            <div class="flag" v-if="item.isnong === 2" style="color: #FFFF00">已取消</div>
          </div>
        </div>
      </div>
    </div>
    <popup v-model="orderInfoShow" position="bottom" width="100%" height="100%">
      <div class="route_info_box">
        <topHeader>
          <div slot="center">
            <span>路线详情</span>
          </div>
          <div class="close" slot="right" @click="closeOrderInfo" style="font-size:25px;">
            &times;
          </div>
        </topHeader>
        <div class="myroute_box_con_b">
          <div class="order_li">
            <div class="order_li_l">
              <p>【始终点】：{{ orderInfo1.start }} &rarr; {{ orderInfo1.end }}</p>
              <p>【时间】：{{ orderInfo.time }}</p>
              <p>【车主姓名】：{{ orderInfo.owner }}</p>
              <p>【车主电话】：{{ orderInfo.phone }}</p>
              <p>【车型】：{{ orderInfo.type }}</p>
              <!-- <p>路线：{{ routerInfo.roadline }}</p> -->
              <!-- <p>人数：1人</p> -->
            </div>
          </div>
        </div>
        <div class="orderInfo_bottom" v-if="orderInfo1.status===0">
          <div class="call" @click="callDriver(orderInfo.phone)">车主电话</div>
          <div class="orderCancle" @click="cancleOrder">退订座位</div>
        </div>
        <div class="orderInfo_bottom" v-if="orderInfo1.status===1">
          <div style="width: 100%; height:45px;line-height:45px;background:#999;color:#FFFF00">已取消</div>
        </div>
      </div>
      <popup v-model="orderCancleShow" position="right" width="100%" height="100%">
        <topHeader>
          <div slot="center">
            <span>取消预约</span>
          </div>
          <div class="close" slot="right" @click="closeOrderCancle" style="font-size:25px;">
            &times;
          </div>
        </topHeader>
        <div class="orderCancleBox">
          <div class="orderCancle_con">
            <textarea placeholder="请输入您取消的原因"  v-model="ordercancleMark"></textarea>
          </div>
          <div class="summit_btn" @click="sumitOrderCancle">
            提交
          </div>
        </div>
      </popup>
    </popup>
    <popup v-model="noCarInfoShow" position="bottom" width="100%" height="100%">
      <div class="route_info_box">
        <topHeader>
          <div slot="center">
            <span>预约详情</span>
          </div>
          <div class="close" slot="right" @click="closeNocarInfo">
            &times;
          </div>
        </topHeader>
        <div class="myroute_box_con_b">
          <div class="order_li">
            <div class="order_li_l">
              <p>【始终点】：{{ noCarInfo.start }} &rarr; {{ noCarInfo.end }}</p>
              <p>【出发时间】：{{ noCarInfo.outtime }}</p>
              <p>【等待时间】：{{ noCarInfo.waittime }}</p>
              <p>【人数】：{{ noCarInfo.num }}</p>
            </div>
          </div>
        </div>
        <!-- <div class="orderInfo_bottom">
          <div class="call" @click="callDriver(orderInfo.phone)">车主电话</div>
          <div class="orderCancle" @click="cancleOrder">退订座位</div>
        </div> -->
        <div class="orderInfo_bottom" v-if="noCarInfo.isnong === 0">
          <div style="width: 50%; height:45px;line-height:45px;background:#ffff00;color:#999" @click="cancleNocarOrder(noCarInfo.id)">取消</div>
          <div style="width: 50%; height:45px;line-height:45px;background:#999;color:#FFFF00" @click="delateNocarOrder(noCarInfo.id)">删除</div>
        </div>
        <div class="orderInfo_bottom" v-if="noCarInfo.isnong === 2">
          <div style="width: 1000%; height:45px;line-height:45px;background:#999;color:#FFFF00" @click="delateNocarOrder(noCarInfo.id)">删除</div>
        </div>
        <!-- <div class="myroute_box_con_b">
          <div class="order_li">
            <div class="order_li_l">
              <p>【始终点】：{{ routerInfo.start }} &rarr; {{ routerInfo.end }}</p>
              <p>【时间】：{{ routerInfo.outtime }}</p>
              <p>【车型】：{{ routerInfo.motorType }}</p>
              <p>【座位】：{{ routerInfo.freeSeat }}人</p>
              <p>【车费】：{{ routerInfo.cost }}/人</p>
              <p>【路线】：{{ routerInfo.roadline }}</p>
              <p>【路线】：{{ routerInfo.remark }}</p>
            </div>
          </div>
        </div> -->
      </div>
    </popup>
    <toast v-model="deleteSuccess">删除成功</toast>
  </div>
</template>

<script>
import { nocarOrderDatele, nocarOrderCancle, loadReverseList, loadOrderInfo, cancleOrder, cancleUserOrder, nocarOrderList } from '@/api/allapis'
import topHeader from './../../components/topHeader'
import { Toast, Popup, ButtonTab, ButtonTabItem } from 'vux'
export default {
  data () {
    return {
      manageClick: false,
      manageBolean: true,
      deleteSuccess: false,
      orderInfoShow: false,
      noCarInfoShow: false,
      orderCancleShow: false,
      ordercancleMark: '',
      orderId: null,
      num: null,
      orderList: [],
      orderInfo: {},
      orderInfo1: {},
      noCarInfo: {},
      tabValue:0,
      noCarOrderList: []
    }
  },

  components: {
    topHeader,
    Toast,
    Popup,
    ButtonTab,
    ButtonTabItem
  },

  computed: {},

  mounted () {
    this.loadData()
  },

  methods: {
    tabClick (type) {
      if (type === 1) {
        this.tabValue = 0
        this.manageClick = false
      } else {
        this.tabValue = 1
        this.manageClick = true
      }
    },
    loadData () {
      loadReverseList({ userId: this.$store.state.user.uerInfo.id, type: 0 }).then(res => {
        this.orderList = res.data
      })
      nocarOrderList({userId: this.$store.state.user.uerInfo.id}).then(res => {
        this.noCarOrderList = res.data
      })
    },
    goMine () {
      this.$router.go(-1)
    },
    viewOrder (item) {
      this.orderInfoShow = true
      this.orderInfo1 = item
      this.orderId = item.id
      this.num = item.num
      loadOrderInfo({ orderId: item.id }).then(res => {
        this.orderInfo = res.data[0]
        console.log(this.orderInfo)
      })
      // this.$router.push({ name: 'ordercar' })
    },
    viewNocarOrder (item) {
      this.noCarInfoShow = true
      this.noCarInfo = item
      console.log(item)
    },
    updateNocarOrder (item) {
      this.$router.push({ name: 'nocarorderupdate', query: { pageName: 'orders' } })
    },
    cancleOrder () {
      this.orderCancleShow = true
    },
    delateNocarOrder (id) {
      nocarOrderDatele({id}).then(res => {
        this.$vux.alert.show({
          title: '人人同行提示',
          content: res.msg,
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
      })
      this.noCarInfoShow = false
      this.loadData()
    },
    cancleNocarOrder (id) {
      nocarOrderCancle({id}).then(res => {
        this.$vux.alert.show({
          title: '人人同行提示',
          content: res.msg,
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
      })
      this.noCarInfoShow = false
      this.loadData()
    },
    closeOrderInfo () {
      this.orderInfoShow = false
    },
    closeNocarInfo () {
      this.noCarInfoShow = false
    },
    closeOrderCancle () {
      this.orderCancleShow = false
    },
    sumitOrderCancle () {
      let params = {
        id: this.orderId,
        remake: this.ordercancleMark,
        userId: this.$store.state.user.uerInfo.id
      }
      cancleOrder(params).then(res => {
        // alert(res.data)
        if(res.data === '退订成功'){
          cancleUserOrder({ id: this.orderId, number: this.num}).then(res => {
            console.log(res)
          })
        }
        this.$vux.alert.show({
          title: '人人同行提示',
          content: res.data,
          buttonText: '好的',
          hideOnBlur: true,
          maskZIndex: 100
        })
        this.ordercancleMark = ''
        this.orderCancleShow = false
        this.orderInfoShow = false
        this.loadData()
      })
    },
    delateOrder () {
      this.deleteSuccess = true
    },
    orderManage () {
      this.manageClick = !this.manageClick
    },
    doManage () {
      this.manageBolean = false
    },
    doManageCancle () {
      this.manageBolean = true
    },
    callDriver (phone) {
      window.location.href = 'tel:' + phone
    }
  }
}

</script>
<style lang='less' scoped>
@import url('./orders.less');
</style>